<template>
	<view class="container">
		<view class="header" :style="headerStyle">
			<view class="header-left">
				<image class="icon-back" src="../../static/icons/back.svg" />
			</view>
			<view class="header-content">
				<gr-search-input v-model="navInputValue" :placeholder="searchPlaceholder" />
			</view>
		</view>
		<view class="content">
			<view class="aside">
				<scroll-view scroll-y="true">
					<view class="list">
						<view
						 v-for="item in types"
						 :key="item.id"
						 :class="['list-item', { active: typeSelected === item.id }]"
						 @click="typeSelectAction(item.id)"
						>
							<view class="list-item-decoration" />
							<view class="list-item-content">
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="room">
				<scroll-view scroll-y="true">
					<view class="list">
						<view v-for="item in values" :key="item.id" class="list-item">
							<view class="list-item-card">
								<view class="list-item-top-row">
									<view class="list-item-card-name">
										<text>{{ item.name }}</text>
									</view>
									<view class="list-item-card-time">
										<text>截单：</text>
										<text>{{ item.time }}</text>
									</view>
								</view>
								<view class="list-item-bottom-row">
									<view class="list-item-card-cost">
										<text>{{ currencySymbol }}</text>
										<text>{{ item.cost }}</text>
										<text>/</text>
										<text>{{ item.unit }}</text>
									</view>
									<view class="list-item-card-button">
										<button class="select-btn">选购</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer" :style="footerStyle">
			<view class="footer-content">
				<view class="col-left">
					<text>备注：</text>
				</view>
				<view class="col-right">
					<view class="total-text">
						<text class="lb">总计：</text>
						<text class="sb">{{ currencySymbol }}</text>
						<text class="va">0</text>
					</view>
					<button class="buy-btn">购物车</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {
	ref,
	onMounted,
	computed
} from 'vue'
import {
	types,
	values
} from './data'
const searchPlaceholder = "货品编码/名称"
const currencySymbol = "¥"
const paddingTopHeight = ref(0)
const navHeight = ref(0)
const bottomHeight = ref(0)
const navInputValue = ref("")
const typeSelected = ref("")
const headerStyle = computed(() => ({
	"padding-top": paddingTopHeight.value + 'px',
	"height": navHeight.value + 'px',
	"flex-basis": navHeight.value + 'px',
}))
const footerStyle = computed(() => ({
	"padding-bottom": bottomHeight.value + 'px',
}))
const typeSelectAction = (value: any) => {
	typeSelected.value = value
}
onMounted(() => {
	const {
		statusBarHeight,
		safeAreaInsets
	} = uni.getSystemInfoSync()
	const {
		top,
		height
	} = uni.getMenuButtonBoundingClientRect()
	console.log("getMenuButtonBoundingClientRect", uni.getSystemInfoSync(), uni.getMenuButtonBoundingClientRect())
	if (typeof statusBarHeight === "number") {
		paddingTopHeight.value = statusBarHeight
		navHeight.value = height + (top - statusBarHeight) * 2;
	}
	if (typeof safeAreaInsets === "object") {
		bottomHeight.value = safeAreaInsets.bottom
	}
})
</script>

<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100vh;
	overflow: hidden;
	color: $uni-text-color;
}

.header {
	background-color: #ee4c36;
	padding-right: 30vw;
	display: flex;
	flex: 0;

	.header-left {
		flex: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 40rpx;

		.icon-back {
			height: 50rpx;
			width: 50rpx;
			display: inline-block;
			color: #FFFFFF;
		}
	}

	.header-content {
		flex: 1;
		display: flex;
		align-items: center;

		gr-search-input {
			flex: 1;
		}
	}
}

.content {
	flex: 1;
	align-items: stretch;
	background-color: $uni-content-bg-color;
	display: flex;
	flex-direction: row;
	overflow: hidden;

	.aside {
		flex: 0;
		background-color: #ffffff;
		margin-right: 10rpx;
		width: 30vw;
		flex-basis: 30vw;
		display: flex;

		.list {
			padding-top: 40rpx;

			.list-item {
				$padding-width: 20rpx;
				$decoration-width: 8rpx;
				padding: 20rpx $padding-width+$decoration-width 20rpx $padding-width;
				display: flex;
				flex-direction: row;
				align-items: center;

				.list-item-decoration {
					flex: 0;
					flex-basis: $decoration-width;
					width: $decoration-width;
					height: 24rpx;
					border-radius: 20rpx;
					background-color: #ee4c36;
					visibility: hidden;
				}

				.list-item-content {
					flex: 1;
					text-align: center;
					font-size: 24rpx;
				}

				&.active {
					.list-item-decoration {
						visibility: visible;
					}

					.list-item-content {
						text {
							color: #ee4c36;
						}
					}
				}
			}
		}
	}

	.room {
		flex: 1;
		display: flex;

		.list {
			.list-item {
				.list-item-card {
					background-color: #ffffff;
					border: 1rpx solid #ebeef5;
					padding: 20rpx;
					margin-bottom: 10rpx;

					.list-item-top-row {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding-bottom: 20rpx;
						white-space: nowrap;

						.list-item-card-name {
							flex: 1;
							color: #2f2f2f;
							font-size: 32rpx;
						}

						.list-item-card-time {
							flex: 0;
							font-size: 24rpx;
							color: #767676;
						}
					}

					.list-item-bottom-row {
						display: flex;
						flex-direction: row;
						align-items: center;
						white-space: nowrap;

						.list-item-card-cost {
							flex: 1;
							color: #ee4c36;
							font-size: 30rpx;
						}

						.list-item-card-button {
							flex: 0;
						}

						.select-btn {
							height: 60rpx;
							line-height: 60rpx;
							font-size: 28rpx;
							background-color: #f42f27;
							color: #eeeeee;
						}
					}
				}
			}
		}
	}
}

.footer {
	flex: 0;
	display: flex;
	flex-direction: row;

	.footer-content {
		flex: 1;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.col-left {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;

		text {
			color: #bbbbbb
		}
	}

	.col-right {
		flex: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		white-space: nowrap;

		.buy-btn {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			background-color: #f42f27;
			color: #eeeeee;
		}

		.total-text {
			padding-right: 20rpx;

			.lb {
				color: #3a3a3a
			}

			.sb {
				color: #f42f27;
				margin-right: 5rpx;
			}

			.va {
				color: #f42f27
			}
		}
	}
}
</style>

